<template>
  <div class="container-form">
    <div class="content">
      <n-input show-count style="height: 300px;" v-model:value="form.content" type="textarea" placeholder="今天说点什么？" />
    </div>

    <div class="image-upload mt-10">
      <n-flex class="mt-10 mb-10">
        <p>是否置顶</p>
        <p><n-switch @update:value="handleTopping" v-model:value="form.topping" /></p>
      </n-flex>
      <n-upload :custom-request="handleFinish" :default-file-list="previewFileList" list-type="image-card"
        @preview="handlePreview" />
      <n-modal v-model:show="showModal" preset="card" style="width: 600px" title="一张很酷的图片">
      </n-modal>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { UploadFileInfo, UploadCustomRequestOptions } from 'naive-ui'

interface NoteForm {
  userId: string;
  title: string;
  content: string;
  imageUrl: any;
  username: string;
  createTime: Date;
  topping: boolean;
}
export default defineComponent({
  name: 'NoteForm',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    
  },
  components: {},
  setup() {
    let files = ref({});
    const showModalRef = ref(false);
    const previewImageUrlRef = ref();
    const previewFileList = ref<UploadFileInfo[]>([])
    const form = reactive<NoteForm>({
      userId: '',
      title: '',
      content: '',
      imageUrl: '',
      username: '',
      topping: false,
      createTime: new Date()
    })
    // @ts-ignore
    function handleFinish({ file }: UploadCustomRequestOptions) {
      files.value = file as any;

    }

    function handleTopping(value: boolean) {
      form.topping = value;
    }

    function handlePreview(file: UploadFileInfo) {
      const { url } = file
      previewImageUrlRef.value = url as string
      showModalRef.value = true
    }

    return {
      form,
      files,
      handleFinish,
      handlePreview,
      previewFileList,
      showModal: showModalRef,
      handleTopping,

    }
  },
});
</script>
